<div class="row" style="text-align:right;">
	<a href="?ap=<?=$ap?>&thisact=add"><button class="btn btn-primary" type="button">Add Blog</button></a>
</div>

<div class="row" style="margin-top:20px;">  
    <div class="col-md-2">
    	<?php
        $sql_category = "select * from inancm_category order by cat_id";
		$data_category = $inancm->select_db($sql_category);
		
		if (!isset($catid)){ $catid = 1; }
		?>
    	<ul class="list-group" style="list-style:none;">
        	<?php foreach($data_category as $val) { 
				$sql_blogcount = "select count(blog_id) as amount_blog from inancm_blog where cat_id = '".$val['cat_id']."'";
				$data_blogcount = $inancm->select_db($sql_blogcount);
				$amount_blog = $data_blogcount[0]['amount_blog'];
				//$inancm->pre($amount_blog);				
				?>
        		<li>
				<?php
				if ($catid == $val['cat_id']) {
					echo '<a class="list-group-item list-group-item-warning active" href="?ap='.$ap.'&catid='.$val['cat_id'].'">'.$val['cat_name'].'<span class="badge">'.$amount_blog.'</span></a>';
				} else {
					echo '<a class="list-group-item list-group-item-warning" href="?ap='.$ap.'&catid='.$val['cat_id'].'">'.$val['cat_name'].'<span class="badge">'.$amount_blog.'</span></a>';
				}
				?>
                </li>
            <?php } ?>         
        </ul>
    </div>
    

    <style type="text/css">
	.horizontal {
    	display: flex;
   	 	justify-content: center;
	}
	
	.vertical {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
    </style>
    
    
    <div class="col-md-10">
    <table class="table table-hover table-striped table-condensed">
    <thead>
        <tr>
            <th>No.</th>
            <th>Image</th>
            <th>Detail</th>
            <th>Status</th>
            <th>Tools</th>
        </tr>
    </thead>
    <tbody>
    	<?php 
		$sql_blog = "select * from inancm_blog where cat_id = '".$catid."' ORDER BY datetime desc";
		$data_blog = $inancm->select_db($sql_blog);
		$n = 0;
		foreach($data_blog as $val){
			$n++;
			/*Image*/
			$data_img = getimagesize($upload_dir.$val['blog_image']);
			$arr_img = explode(' ',$data_img[3]);
			
			$w_set = str_replace('"','',$arr_img[0]);
			$arr_w = explode('=',$w_set);
			$w = $arr_w[1];
			
			$h_set = str_replace('"','',$arr_img[1]);
			$arr_h = explode('=',$h_set);
			$h = $arr_h[1];
		?>
        <tr>
        	<td><?=$n;?></td>
            <td>
            	<?php  if ($w > $h) { ?>
            	<div class="col-md-5">
                    <a href="#" class="thumbnail vertical" style="height:80px; width:110px; text-align:center;">
                      	<img src="<?=$upload_dir;?><?=$val['blog_image'];?>" style="width:70px; display: block;" data-src="holder.js/100%x180" alt="100%x180">
                    </a>
                </div> 
                <?php } else { ?>  
                 <div class="col-md-5">
                    <a href="#" class="thumbnail" style="height:80px; width:110px; text-align:center;">           
                      	<img src="<?=$upload_dir;?><?=$val['blog_image'];?>" style="height:70px; display: block;" data-src="holder.js/100%x180" alt="100%x180">
                    </a>
                </div> 
                <?php } ?>           	
            </td>         
            <td>          
                <div><strong>Name</strong> : <?=$val['blog_title'];?></div>
                <div><strong>Detail</strong> : <?php echo $inancm->subtext($val['blog_des'],50);?></div>
           	</td>
            <td>
            	<div id="showstatus<?=$val['blog_id']?>">
					<?php if ($val['blog_show']) { ?>
                        <div class="label label-success">show</div>        		
                    <?php } else { ?>
                        <div class="label label-warning">hide</div>								
                    <?php } ?>
                </div>
            </td>
            <td>
            	<div class="hidden-phone visible-desktop action-buttons">              
                   <div id="lockstatus<?=$val['blog_id']?>" onclick="fnLock('<?=$val['blog_id']?>');" style="cursor:pointer; float:left;">
						<?php if ($val['blog_show']) { ?>
                            <i class="glyphicon glyphicon-eye-open" style='cursor:pointer;'></i>	                                       		
                        <?php } else { ?>
                            <i class="glyphicon glyphicon-eye-close"  style='cursor:pointer;'></i> 							
                        <?php } ?>     
                    </div>
                    
                    <div style="float:left; margin-left:5px;">
                    <a href="index.php?ap=<?=$ap?>&thisact=edit&id=<?=$val['blog_id']?>" style="margin-left:5px;">  
                    	<i class="glyphicon glyphicon-pencil"></i> 
                    </a>  
                    <a href="#myModal<?=$val['blog_id']?>" data-toggle="modal">  
                    	<i class="glyphicon glyphicon-trash"></i> 
                    </a>                                    
                    </div>
                 </div>   
                    
                    
                 <div class="modal fade" id="myModal<?=$val['blog_id']?>">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header" style="background-color:#FEDEE0;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">You want to delete?</h4>
                      </div>
                      <div class="modal-body">
                        <p><strong>Product Name </strong>: <?=$val['blog_title'];?></p>
                        <p><strong>Blog Detail </strong> : <?php echo $inancm->subtext($val['blog_des'],50);?></p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <a href="index.php?ap=<?=$ap?>&catid=<?=$catid?>&thisact=delete&id=<?=$val['blog_id']?>"> 
                        <button type="button" class="btn btn-danger">Delete</button>
                        </a>
                      </div>
                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->

            
            </td>
        </tr>
        <?php } ?> 
    </tbody>
    </table>
    </div>
</div>




<script type="text/javascript">
function fnLock(id){
	//alert(id);
	jQuery.ajax( {
		url :'modules/mod_blog/blog.lock.php',
		type: 'GET',
		data: 'id='+id+'',
		dataType: 'jsonp',
		dataCharset: 'jsonp',
		success: function (data){
			console.log(data.show);
			$('#showstatus'+id+'').html(data.show);	
			$('#lockstatus'+id+'').html(data.icon);		
		}
	});
}
</script>